<template>
	<view class="reserve">
		<view class="card">
			<view class="list flex">
				<image src="/static/mobile.png" mode="widthFix"></image>
				<view class="right flex tel">
					<view class="label">手机号码</view>
					<text>{{phone}}</text>
					<navigator url="/pages/self/modifyTel" class="flex-center">修改手机号</navigator>
				</view>
			</view>
			<view class="list flex">
				<image src="/static/tab3.png" mode="widthFix"></image>
				<view class="right flex">
					<view class="label">预定人数</view>
					<text>1人</text>
				
				</view>
			</view>
			<view class="list flex">
				<image src="/static/pos-e1.png" mode="widthFix"></image>
				<view class="right flex">
					<view class="label">
						<view>上车点</view>
						<view>（留言）</view>
					</view>
					<input type="text" placeholder="例:人民路与建设路口" v-model="location">
				</view>
			</view>
		</view>
		
		<view class="p flex">
			 <checkbox color="#4CD964" style="transform: scale(.8);" checked="true" />
			 我已阅读并同意小王出行
			 <navigator url="">《合成协议》</navigator>
		</view>
		<button @click="submitForm">立即预定</button>
		<view class="tip">
			<view>说明：</view>
			<view>1、此行程车主已要求线下支付分摊A费</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone:'',
				id:0,
				location:'',
				isSubmit:true
			};
		},
		onLoad(options) {
			this.id = options.id;
		},
		onShow() {
			this.phone = uni.getStorageSync('phone')
		},
		methods:{
			submitForm(){
				if(!this.isSubmit) return
				if(!this.location){
					uni.showToast({
						title:'请填写上车地点',
						icon:'none'
					})
					return
				}
				this.isSubmit = false;
				uni.showLoading({
					title:'预约中...',
					mask:true
				})
				this.$https.post('car_apply/save',{
					id:this.id,
					location:this.location
				}).then(res=>{
					console.log(res)
					uni.showToast({
						title:'预约成功',
						icon:'none'
					})
					setTimeout(()=>{
						uni.redirectTo({
							url:'/pages/self/trip'
						})
					},800)
				}).catch(()=>{
					this.isSubmit = true
				})
			}
		}
	}
</script>

<style lang="less">
	page{
		background: #f2f3f4;
	}
	@color: #4CD964;
	.reserve{
		padding: 24rpx;
		.card{
			background: white;
			border-radius: 5rpx;
			padding: 0 24rpx;
			margin-bottom: 24rpx;
			.list{
				min-height: 100rpx;
				border-bottom: 1px solid #eee;
				image{
					width: 34rpx;
					height: auto;
				}
				.right{
					.label{
						font-weight: bold;
						font-size: 30rpx;
						margin: 0 20rpx;
					}
					text{
						width: 300rpx;
						font-size: 30rpx;
						
					}
					input{
						width: 400rpx;
						height: 140rpx;
					}
					&.tel{
						text{
							width: 270rpx;	
						}
						
						navigator{
							width: 160rpx;
							padding: 10rpx 0 10rpx 20rpx;
							font-size: 30rpx;
							border-left: 1px solid #ddd;
							color:@color
						}
					}
				}
			}
			
		}
		.p{
			font-size: 28rpx;
			navigator{
				color:@color
			}
		}
		button{
			background: @color;
			color:white;
			margin: 60rpx 0;
		}
		.tip{
			font-size: 30rpx;
			line-height: 1.8;
		}
	}
</style>
